/*
 * @Description: 线路详情底部按钮栏
 * @Author: yingying.fan
 * @Date: 2019-05-23 13:47:44
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-05-28 18:29:17
 */
<template>
  <div class="flex-h route-footer-wrapper">
    <template v-for="(item, index) in itemList">
      <p
        class="entry-img-div"
        :key="`entry_${index}`"
        v-if="item.img"
        @click="goToPage(item)"
      >
        <img :src="item.img">
      </p>
      <div
        :key="`entry_${index}`"
        class="flex1 flex-v flex-hsb"
        :class="[(item.type==='hint'&&isAttention)?'attention-color':'']"
        @click="goToPage(item)"
        v-else
      >
        <i
          class="iconfont"
          :class="[(item.type==='hint'&&isAttention)?(item.icon+'-'):item.icon]"
        ></i>
        <p class="fontsize20">{{item.name}}</p>
      </div>
    </template>
    <station-focus
      v-if="showPop"
      @hide="hideStationPop"
      @unattentioncurrentctation="unattentioncurrentctation"
    ></station-focus>
  </div>
</template>

<script>
import StationFocusPop from '../components/StationFocusPop'
import { setAttentionStation } from '../api/busPlugin.js'
export default {
  components: {
    'station-focus': StationFocusPop
  },
  data() {
    return {
      itemList: window.busNavList,
      showPop: false
    }
  },
  computed: {
    station() {
      return this.$store.getters.selectedStation
    },
    isAttention() {
      return this.station ? this.station.hasAttention : false
    }
  },
  mounted() {
    this.itemList = window.busNavList
  },
  methods: {
    goToPage(item) {
      switch (item.type) {
        case 'refresh':
          // TODO: 刷新
          this.$EventBus.$emit('refreshData')
          break
        case 'hint':
          // TODO: 上车提醒
          // this.$EventBus.$emit('takeHint')
          this.stationFocus()
          break
        case 'errorcorrection':
          this.$RouteTableUtils.goToCorrection('SEGMENT_ID=' + this.$store.getters.routeInfo.segmentId)
          break
        case 'same':
          let param = 'ID=' + encodeURIComponent(this.station.sameId) +
            '&NAME=' + encodeURIComponent(this.station.stationName) +
            '&START_LOACTION_LNG=' + encodeURIComponent(this.station.longitude) +
            '&START_LOACTION_LAT=' + encodeURIComponent(this.station.latitude)
          this.$RouteTableUtils.goToSiteDetails(param)
          break
        case 'cloudcard':
          this.$RouteTableUtils.goToCloudCard()
          break
        default:
          break
      }
    },
    stationFocus() {
      if (this.isAttention) {
        this.showPop = true
      } else {
        this.unattentioncurrentctation()
      }
    },
    unattentioncurrentctation() {
      this.hideStationPop()
      // true设置提醒，false取消提醒
      setAttentionStation(this, this.station, !this.isAttention).then(() => {
        this.$EventBus.$emit('refreshDataWithoutPop')
      })
    },
    hideStationPop() {
      this.showPop = false
    }
  }
}
</script>

<style>
.route-footer-wrapper {
  width: 100%;
  height: 98px;
  color: #999999;
  overflow: visible;
  line-height: 1;
  border-top: 1px solid #eeeeee; /*no*/
  /* background-color: red; */
}
.route-footer-wrapper > div {
  text-align: center;
  padding: 8px 0;
  height: 100%;
  box-sizing: border-box;
  overflow: visible;
}
.route-footer-wrapper i {
  font-size: 48px;
}
.entry-img-div {
  width: 150px;
  height: 118px;
  position: relative;
  top: -30px;
  z-index: 5;
  /* margin-top: -30px; */
}
.entry-img-div > img {
  width: 100%;
  height: 100%;
}
.attention-color {
  color: #ff8b41;
}
</style>
